<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-tabs size="small">
      <a-tab-pane :tab="tab1Title" key="1">
        <a-form>
          <a-row>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.apptable.other.data_conversion_mode')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-model="conver" :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-shu-ju-zhuan-huan-fang-shi')" allowClear>
                  <a-select-option value="options">{{ $t('m.eform.formDesign.label.jing-tai-xuan-xiang-ming-cheng-zhuan-code') }}</a-select-option>
                  <a-select-option value="dictOption">{{ $t('m.eform.formDesign.label.shu-ju-zi-dian-ming-cheng-zhuan-code') }}</a-select-option>
                  <a-select-option value="sqlConfig">{{ $t('m.eform.apptable.other.option_sqlConfig') }}</a-select-option>
                  <a-select-option value="httpConfig">{{ $t('m.eform.apptable.other.option_httpConfig') }}</a-select-option>
                  <a-select-option value="userName">{{ $t('m.eform.formDesign.label.yong-hu-ming-cheng-zhuan-id') }}</a-select-option>
                  <a-select-option value="userName2Code">{{ $t('m.eform.formDesign.label.yong-hu-ming-cheng-zhuan-code') }}</a-select-option>
                  <a-select-option value="deptName">{{ $t('m.eform.formDesign.label.bu-men-ming-cheng-zhuan-id') }}</a-select-option>
                  <a-select-option value="deptName2Code">{{ $t('m.eform.formDesign.label.bu-men-ming-cheng-zhuan-code') }}</a-select-option>
                  <a-select-option value="sql">{{ $t('m.eform.formDesign.label.shu-ju-ku-biao-zi-duan-zhuan-huan') }}</a-select-option>
                  <a-select-option value="custom">{{ $t('m.eform.formDesign.label.tong-guo-zi-ding-yi-lei-zhuan-huan') }}</a-select-option>
                  <a-select-option value="customGroovy">{{ $t('m.eform.formDesign.label.tong-guo-zi-ding-yi-jiao-ben-zhuan-huan') }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-show="conver === 'options'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.apptable.other.static_options')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <KChangeOption v-model="options" :group-id="groupId"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="conver === 'dictOption'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.apptable.other.data_dictionary')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <dict-setting :dictOption="dictOption" @input="inputDict" :groupId="groupId" :canEdit="true"></dict-setting>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="conver === 'sqlConfig'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.apptable.other.sql_configuration')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <sql-config-setting :sqlConfig="sqlConfig" @input="inputSqlConfig" :groupId="groupId"></sql-config-setting>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="conver === 'httpConfig'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.apptable.other.service_configuration')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <http-config-setting :httpConfig="httpConfig" @input="inputHttpConfig" :groupId="groupId" :showSelect="true"></http-config-setting>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="conver === 'sql'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.apptable.entity.dsName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <select-ds v-model="dsCode" placeholder="" :allow-clear="false"></select-ds>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.shu-ju-ku-biao')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="tableKey" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-biao-ming')" readOnly></a-input>
                <a-button-group>
                  <a-button @click="selectTable">{{ $t('m.common.button.selectEntityTable') }}</a-button>
                  <a-button @click="selectDbTable">{{ $t('m.common.button.selectDbTable') }}</a-button>
                </a-button-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.yuan-zi-duan')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <!--比如：要把“男”转换成“1”，那么“男”是源字段，“1”是目标字段-->
                <table-col-select v-model="labelKey" :tableName="tableKey" :dsCode="dsCode"
                                  :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-zhuan-huan-qian-dui-ying-de-zi-duan')"></table-col-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.mu-biao-zi-duan')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <!--比如：要把“男”转换成“1”，那么“男”是源字段，“1”是目标字段-->
                <table-col-select v-model="valueKey" :tableName="tableKey" :dsCode="dsCode"
                                  :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-yao-zhuan-huan-de-mu-biao-zi-duan')"></table-col-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="conver === 'custom'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.zi-ding-yi-zhuan-huan-lei')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <!--需要实现的接口是com.yuncheng.viewengine.ext.CustomImportExt-->
                <a-input v-model="customName" :placeholder="$t('m.eform.appview.other.java_event_tip')"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="conver === 'customGroovy'">
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.zi-ding-yi-zhuan-huan-jiao-ben')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <script-button v-model="customGroovyValue" :label="$t('m.eform.formDesign.label.groovy-jiao-ben')" help-code="customImportValueForGroovy" :groovy="true"></script-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-tab-pane>
      <a-tab-pane :tab="tab2Title" key="2">
        <a-form>
          <a-row>
            <a-col :span="6">
              <a-form-item :label="$t('m.eform.formDesign.label.bi-tian-xiao-yan')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                <kCheckbox v-model="rules.requiredEnable" :label="$t('m.common.button.enable')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.ti-shi-xin-xi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--                <a-input v-model="rules.requiredMessage" :placeholder="$t('m.eform.formDesign.label.ti-shi-xin-xi')"/>-->
                <locale-tag v-model="rules.requiredMessage" :group-id="groupId"></locale-tag>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item :label="$t('m.eform.formDesign.label.wei-yi-xiao-yan')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                <kCheckbox v-model="rules.onlyEnable" :label="$t('m.common.button.enable')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.ti-shi-xin-xi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--                <a-input v-model="rules.onlyMessage" :placeholder="$t('m.eform.formDesign.label.ti-shi-xin-xi')"/>-->
                <locale-tag v-model="rules.onlyMessage" :group-id="groupId"></locale-tag>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item :label="$t('m.eform.formDesign.label.chang-du-xiao-yan')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                <kCheckbox v-model="rules.lengthEnable" :label="$t('m.common.button.enable')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.max_length')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-model="rules.lengthNumber" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-zui-da-chang-du')" style="width:100%"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.ti-shi-xin-xi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--                <a-input v-model="rules.lengthMessage" :placeholder="$t('m.eform.formDesign.label.ti-shi-xin-xi')"/>-->
                <locale-tag v-model="rules.lengthMessage" :group-id="groupId"></locale-tag>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item :label="$t('m.eform.formDesign.label.qu-jian-xiao-yan')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                <kCheckbox v-model="rules.betweenEnable" :label="$t('m.common.button.enable')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.qu-jian')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-model="rules.minNumber" :placeholder="$t('m.eform.formDesign.label.zui-xiao-zhi')" :style="200"/>
                ~
                <a-input-number v-model="rules.maxNumber" :placeholder="$t('m.eform.formDesign.label.zui-da-zhi')" :style="200"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.ti-shi-xin-xi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--                <a-input v-model="rules.betweenMessage" :placeholder="$t('m.eform.formDesign.label.ti-shi-xin-xi')"/>-->
                <locale-tag v-model="rules.betweenMessage" :group-id="groupId"></locale-tag>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item :label="$t('m.eform.formDesign.label.zheng-ze-xiao-yan')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                <kCheckbox v-model="rules.patternEnable" :label="$t('m.common.button.enable')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.zheng-ze-zhi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-model="rules.patternCheck" :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-zheng-ze-zhi')" @change="changePattern">
                  <a-select-option v-for="item in validRule" :key="item.value" :value="item.value">
                    {{item.text}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.ti-shi-xin-xi')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--                <a-input v-model="rules.patternMessage" :placeholder="$t('m.eform.formDesign.label.ti-shi-xin-xi')"/>-->
                <locale-tag v-model="rules.patternMessage" :group-id="groupId"></locale-tag>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-item :label="$t('m.eform.formDesign.label.validScript')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                <kCheckbox v-model="rules.customEnable" :label="$t('m.common.button.enable')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.zi-ding-yi-lei')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <!--需要实现的接口是com.yuncheng.viewengine.ext.CustomCheckExt-->
                <a-input v-model="rules.customCheck" :placeholder="$t('m.eform.appview.other.java_event_tip')"/>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item :label="$t('m.eform.formDesign.label.jiao-ben')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <script-button v-model="rules.customGroovyCheck" :label="$t('m.eform.formDesign.label.zi-ding-yi-groovy-jiao-ben')" help-code="customImportCheckForGroovy" :groovy="true"></script-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-tab-pane>
    </a-tabs>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>

    <select-table-dialog ref="selectTableDialog" @selectFinished="selectTableOk" :groupId="groupId"/>
    <select-db-table-dialog ref="selectDbTableDialog" @selectFinished="selectDbTableOk"/>
  </ych-modal>
</template>

<script>

  import DictSetting from '../actAppTable/DictSetting'
  import TableColSelect from '../../select/tag/TableColSelect'
  import SelectTableDialog from "../../select/dialog/SelectTableDialog";
  import SelectDbTableDialog from "../../select/dialog/SelectDbTableDialog";
  import SelectDs from "../../select/tag/SelectDs";
  import kCheckbox from "../designer/packages/KCheckbox/index";
  import {EFormConstant} from "../../EFormConstant";
  import KChangeOption from "../designer/packages/KChangeOption/index";
  import SqlConfigSetting from "../actAppTable/SqlConfigSetting";
  import HttpConfigSetting from "../actAppTable/HttpConfigSetting";
  import ScriptButton from "../designer/packages/ScriptButton";
  import LocaleTag from "../../localeProvider/tag/LocaleTag";

  export default {
    name: 'ImportRulesDialog',
    components: {
      DictSetting,
      SqlConfigSetting,
      HttpConfigSetting,
      TableColSelect,
      SelectTableDialog,
      SelectDbTableDialog,
      SelectDs,
      kCheckbox,
      KChangeOption,
      ScriptButton,
      LocaleTag,
    },
    props: {
      groupId: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        title: this.$t('m.common.label.operate'),
        tab1Title: this.$t('m.eform.formDesign.label.zhuan-huan-gui-ze'),
        tab2Title: this.$t('m.eform.formDesign.label.xiao-yan-gui-ze'),
        visible: false,
        record: {},
        conver: undefined,
        options: [],
        dictOption: {},
        sqlConfig: {},
        httpConfig: {},
        dsCode: null,
        tableKey: null,
        labelKey: null,
        valueKey: null,
        customName: null,
        customGroovyValue: null,
        rules: {},
        validRule: EFormConstant.validRule,
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 18},
        },
        labelCol2: {
          xs: {span: 24},
          sm: {span: 16},
        },
        wrapperCol2: {
          xs: {span: 24},
          sm: {span: 8},
        },
      }
    },
    methods: {
      open(json, record) {
        this.record = record ? record : {}
        this.title = this.$t('m.eform.formDesign.label.dao-ru-gui-ze-pei-zhi')
        this.title += this.record.colName ? ('——' + this.$locale(this.record.colName)) : ''
        // 为了校验规则可以设置长度
        this.record.type = "input"

        const model = (json && json != '') ? JSON.parse(json) : {}
        this.conver = model.conver || undefined
        const options = model.options || {}
        this.rules = model.rules || {}

        this.initData(options)
      },
      initData(options) {
        this.options = options.options || []
        this.dictOption = options.dictOption || {}
        this.sqlConfig = options.sqlConfig || {}
        this.httpConfig = options.httpConfig || {}
        this.dsCode = options.dsCode || 'dataSourceDefault'
        this.tableKey = options.tableKey || null
        this.labelKey = options.labelKey || null
        this.valueKey = options.valueKey || null
        this.customName = options.customName || null
        this.customGroovyValue = options.customGroovyValue || null

        this.visible = true
      },
      handleOk() {
        const model = {}
        if (this.rules.requiredEnable || this.rules.customEnable || this.rules.lengthEnable || this.rules.patternEnable || this.rules.onlyEnable || this.rules.betweenEnable) {
          model.rules = this.rules
        }
        if (this.conver) {
          const options = {}
          if (this.conver === 'options') {
            if (this.options && this.options.length > 0) {
              options.options = this.options
            }
          } else if (this.conver === 'dictOption') {
            if (this.dictOption.dictCode) {
              options.dictOption = this.dictOption
            }
          } else if (this.conver === 'sqlConfig') {
            if (this.sqlConfig.sqlCode) {
              options.sqlConfig = this.sqlConfig
            }
          } else if (this.conver === 'httpConfig') {
            if (this.httpConfig.httpCode) {
              options.httpConfig = this.httpConfig
            }
          } else if (this.conver === 'sql') {
            options.dsCode = this.dsCode
            if (this.tableKey) {
              options.tableKey = this.tableKey
            }
            if (this.labelKey) {
              options.labelKey = this.labelKey
            }
            if (this.valueKey) {
              options.valueKey = this.valueKey
            }
          } else if (this.conver === 'custom') {
            if (this.customName) {
              options.customName = this.customName
            }
          } else if (this.conver === 'customGroovy') {
            if (this.customGroovyValue) {
              options.customGroovyValue = this.customGroovyValue
            }
          }

          model.conver = this.conver
          model.options = options

        }
        if (Object.keys(model).length > 0) {
          this.$emit('selectFinished', JSON.stringify(model))
        } else {
          this.$emit('selectFinished', '')
        }
        this.visible = false
      },
      handleCancel() {
        this.visible = false
      },
      inputDict(dictOption) {
        this.dictOption = dictOption
      },
      inputSqlConfig(sqlConfig) {
        this.sqlConfig = sqlConfig
      },
      inputHttpConfig(httpConfig) {
        this.httpConfig = httpConfig
      },
      selectTable() {
        this.$refs.selectTableDialog.dsCode = this.dsCode
        this.$refs.selectTableDialog.radio = true
        this.$refs.selectTableDialog.visible = true
      },
      selectTableOk(selectedRowKeys, selectionRows) {
        this.dsCode = selectionRows[0].dsCode
        this.tableKey = selectionRows[0].tableName
      },
      selectDbTable() {
        this.$refs.selectDbTableDialog.queryParam.dsCode = this.dsCode
        this.$refs.selectDbTableDialog.radio = true
        this.$refs.selectDbTableDialog.visible = true
      },
      selectDbTableOk(selectedRowKeys, selectionRows) {
        this.dsCode = selectionRows[0].dsCode
        this.tableKey = selectionRows[0].tableName
      },
      changePattern(value) {
        const rule = EFormConstant.validRule.find(rule => rule.value === value);
        if (rule) {
          this.rules.patternMessage = rule.message;
        }
      }
    }
  }
</script>
